<template>
  <div>
    <div class="title">
      <div class="left">
        <span class="mr">设计师-{{ name }}</span>
        <span>现有作品: {{ num }}</span>
      </div>
      <div class="right">
        <el-button @click="editDesigner">编辑资料</el-button>
        <el-button type="primary" @click="editWorks(0,1)">添加作品</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="cover" label="封面">
          <template slot-scope="scope">
            <div>
              <!-- <el-avatar :size="60" :src="scope.row.cover" /> -->
              <img style="width:70px;height:42px;object-fit:cover;" :src="scope.row.cover" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="content" label="简介" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="col-blue" @click="editWorks(scope.row,2)">编辑</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total,prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getDesignerWorksList } from "@/api/http/designer";
export default {
  data() {
    return {
      designerId: 0,
      name: "玛利亚",
      num: 560,
      page: 1,
      total: 0,
      size: 10,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        }
      ]
    };
  },
  created() {
    if (this.$route.query.designerId) {
      this.designerId = this.$route.query.designerId;
      this.$forceUpdate();
      this.getDesignerWorksList();
    }
  },
  methods: {
    // 编辑设计师资料
    editDesigner() {
      window.localStorage.setItem(
        "designerVal",
        JSON.stringify(this.designerVal)
      );
      this.$router.push({
        path: "/designer/edit-information",
        query: { designerId: this.designerId }
      });
    },
    // 添加或者编辑资料
    editWorks(item, i) {
      if (i == 1) {
        this.$router.push({
          path: "/designer/edit-production",
          query: { designerId: this.designerId }
        });
      } else {
        window.localStorage.setItem("designerMes", JSON.stringify(item));
        this.$router.push({
          path: "/designer/edit-production",
          query: { designerId: this.designerId, id: item.id }
        });
      }
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val;
      this.getDesignerWorksList();
    },
    // 获取设计师作品列表数据
    getDesignerWorksList() {
      getDesignerWorksList(this.designerId).then(res => {
        if (res.code == 200) {
          let resData = res.data;
          this.tableData = res.data.data;
          this.total = resData.total;
          this.num = resData.total;
          this.name = resData.designer.name;
          this.designerVal = resData.designer;
        }
      });
    },
    edit() {
      this.$router.push({ path: "/designer/edit-production" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    span {
      line-height: 44px;
      color: rgba(68, 68, 68, 1);
      font-size: 18px;
      text-align: center;
      font-family: Roboto;
      font-weight: bold;
    }
  }
  .right {
    display: flex;
    align-items: center;
  }
}
.bottom {
  margin-top: 20px;
}
.mr {
  margin-right: 15px;
}
.block {
  margin: 40px;
  text-align: center;
}
</style>
